import React, { Component } from 'react'

function Dialog(props){
  return (
    <div style={{border:`4px solid ${props.color || "blue"}`}}>
      {props.children}
      <div className="footer">{props.footer}</div>
    </div>
  )
}

function WelcomeDialog(props){
  return (
    <Dialog {...props}>
      <h1>欢迎光临</h1>
      <p>感谢使用react</p>
    </Dialog>
  )
}

const Api={
  getUser(){
    return {name:'jerry',age:20}
  }
}

function Fetcher(props){
  const user=Api[props.name]();
  return props.children(user)
}

function Filter(props){
  // eslint-disable-next-line array-callback-return
  return props.children.map((item)=>{
    // eslint-disable-next-line eqeqeq
    if(item.type==props.type){
      return item
    }
  })
}

function RadioGroup(props){
  return (
    <div>
      {React.Children.map(props.children,child=>{
        //vdom不可更改，克隆一个新的去改才可以
        return React.cloneElement(child,{name:props.name})
      })}
    </div>
  )
}

function Radio({children,...rest}){
  return (
    <label>
      <input type="radio" {...rest}/>
      {children}
    </label>
  )
}

export default function(){
  const footer=<button onClick={()=>alert('确定')}>确定</button>;
  //return <WelcomeDialog color="green" footer={footer}/>
  return (
    <div>
      {/* <Fetcher name="getUser">
        {({name,age})=>(
          <p>{name}-{age}</p>
        )}
      </Fetcher> */}

      {/* 过滤指定标签类型 */}
      {/* <Filter type="p">
        <h1>h1</h1>
        <p>1111</p>
        <h1>1111</h1>
        <p>2222</p>
        <p>3333</p>
      </Filter> */}
      <RadioGroup name="group">
        <Radio value="radio1">vue</Radio>
        <Radio value="radio2">react</Radio>
        <Radio value="radio3">node</Radio>
      </RadioGroup>
    </div>
  )
}

 //export default class Composition extends Component {
//   render() {
//     return (
//       <div>
        
//       </div>
//     )
//   }
// }
